<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .b{
             width:200px;
             height: 200px;
             background:cyan;
         }
        .c{
            font-style: italic;
        }
    </style>
    <script>
        function f1(){
            var div=document.querySelector("div");
            var p=document.querySelector("p");
            //DOM对象.className 获取class的值
            // console.log(div.className);

            //添加类样式  DOM对象.className="值"
            div.className="b c";

            // DOM对象.style.样式名  获取行内样式值
            // console.log(p.style.width);

            // DOM对象.style.样式名=值 添加行内样式
            p.style.fontSize="30px";//遇到复合词，去掉-,第二个单词首字母大写
            p.style.display="inline";
        }
    </script>
</head>
<body>
    <input type="button" value="访问css" onclick="f1()">
    <div class="a">div</div>
    <p style="width:100px;height:100px;background:yellow;">p</p>
</body>
</html>